import React, { useState, memo } from "react";
import { useHistory } from "react-router-dom";
import { Icon, TabBar } from "zarm";
const TabIcon = Icon.createFromIconfont(
  "//at.alicdn.com/t/font_2470603_w6o9qpcjhth.js"
);
export default memo(function Tab() {
  const [activeKey, setactiveKey] = useState("bookrack");
  const histy = useHistory();
  const data = [
    {
      index: "bookrack",
      title: "书架",
      icon: "icon-shujia",
      icons: "icon-shujia-copy",
    },
    {
      index: "bookcity",
      title: "书城",
      icon: "icon-shucheng",
      icons: "icon-shucheng-copy",
    },
    {
      index: "classify",
      title: "分类",
      icon: "icon-yingyongzhongxin",
      icons: "icon-yingyongzhongxin-copy",
    },
    {
      index: "mine",
      title: "我的",
      icon: "icon-wode-wode",
      icons: "icon-wode-wode-copy",
    },
  ];
  //路由跳转
  const upChange = (e) => {
    setactiveKey(e);
    histy.push("/home/" + e);
  };
  return (
    <div>
      <TabBar activeKey={activeKey} onChange={upChange}>
        {data.map((item) => {
          return (
            <TabBar.Item
              itemKey={item.index}
              title={item.title}
              key={item.index}
              icon={
                activeKey === item.index ? (
                  <TabIcon type={item.icon} />
                ) : (
                  <TabIcon type={item.icons} />
                )
              }
            />
          );
        })}
      </TabBar>
    </div>
  );
});
